<template>
  <div class="limitdiv">
    <div style="margin: 20px;"></div>
    <el-form
      :label-position="labelPosition"
      label-width="90px"
      :rules="rules"
      ref="message"
      class="demo-ruleForm"
      :model="message"
    >
      <el-form-item label="信息ID">
        <el-input v-model="message.msgId" readonly disabled></el-input>
      </el-form-item>
      <el-form-item label="信息名称" prop="msgName">
        <el-input v-model="message.msgName"></el-input>
      </el-form-item>
      <el-form-item label="信息概要" prop="msgMain">
        <el-input v-model="message.msgMain"></el-input>
      </el-form-item>

      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="发布时间" prop="msgBeginDate">
              <el-date-picker v-model="message.msgBeginDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="发布等级" prop="msgLevel">
              <el-select v-model="message.msgLevel" placeholder="请选择发布信息类型">
                <el-option label="一般信息" value="0"></el-option>
                <el-option label="重要信息" value="1"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-form-item label="信息发布者" prop="msgHost">
        <el-input v-model="message.msgHost" disabled readonly></el-input>
      </el-form-item>

      <el-form-item label="信息内容" prop="msgMsg">
        <el-input type="textarea" v-model="message.msgMsg"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('message')">立即创建</el-button>
        <el-button type="primary" @click="turnback" plain>取消</el-button>
        <!-- <el-button @click="resetForm('message')">重置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "right",
      message: {
        msgId: "",
        msgName: "",
        msgLevel: "",
        msgMsg: "",
        msgBeginDate: "",
        msgHost: "",
        msgMain: ""
      },
      rules: {
        msgName: [
          { required: true, message: "请输入通知标题", trigger: "blur" }
        ],
        msgBeginDate: [
          { required: true, message: "请输入通知时间", trigger: "blur" }
        ],
        msgLevel: [
          { required: true, message: "请输入通知登记", trigger: "change" }
        ],
        msgMsg:[{required:true,message:"请输入通知内容",trigger:"blur"}]
      }   
    };
  },
  created() {
    this.axios
      .get("message/addmessage")
      .then(res => {
        this.message.msgId = res.data;
        console.log(res);
      })
      .catch(err => {
        console.error(err);
      });

    this.message.msgHost = sessionStorage.getItem("msgHost");
    console.log(this.message.msgHost);
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.message); //访客数据

          this.axios
            .post("message/addmessage", this.message)
            .then(res => {
              if ("success" == res.data) {
                //消息提示框
                this.$alert("添加成功", {
                  confirmButtonText: "确定",
                  callback: action => {
                    this.$router.push("/index_manager/messagehead");
                  }
                });
              }
              console.log(res);
            })
            .catch(err => {
              console.error(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    turnback() {
      this.$router.push("/index_manager/messagehead");
    }
  },
  components: {}
};
</script>

<style scope>
.limitdiv {
  width: 500;
  margin: 0 auto;
  width: 50%;
}
</style>
